const component_cargo_item = `
<div class="item" v-loading="loading">
    <div class="item_image">
        <el-image fit="cover" :src="cargoItem.image_url_real">
            <div slot="error" class="image-slot">
                <img :src="cargoItem.image_url_real" style="height:100%;width:100%;"  />
            </div>
        </el-image>
    </div>
    <div class="item_cargo_name">{{cargoItem.sku_name || '商品名称'}}</div>
    <div class="item_cargo_desc">{{cargoItem.introduction || '商品名称'}}</div>
</div>
`

Vue.component('cargo-item', {
    props: {
        skuId: {
            type: Number,
            required: true,
            default: 0,
        },
    },
    data: function () {
        return {
            loading: false,
            cargoItem: {},
        }
    },
    mounted() {
        this.getGoodsSku()
    },
    methods: {
        // 查找商品详情
        getGoodsSku() {
            this.loading = true
            if (!this.skuId) {
                return (this.loading = false)
            }
            const that = this
            $.ajax({
                url: ns.url('admin/pc/getGoodsSkuInfo'),
                data: { sku_id: that.skuId },
                type: 'POST',
                dataType: 'JSON',
                success: function (res) {
                    res.data.image_url_real = ns.img(res.data.sku_image)
                    // that.cargoItem = res.data
                    // that.cargoItem.image_url_real = ns.img(that.cargoItem.sku_image)
                    that.$set(that.cargoItem, 'image_url_real', ns.img(res.data.sku_image))
                    that.$set(that.cargoItem, 'sku_name', res.data.sku_name)
                    that.$set(that.cargoItem, 'introduction', res.data.introduction)
                    that.loading = false
                },
                error: function (err) {
                    that.loading = false
                },
            })
        },

        handleImageError($e) {
            this.$set(this.cargoItem, 'image_url_real', this.cargoItem.image_url_real)
        },
    },
    watch: {
        skuId: function () {},
    },
    template: component_cargo_item,
})
